import { defineComponent } from 'vue'

import style from './statisticsRankList.module.styl'

export const StatisticsRankItem = defineComponent({
  name: 'statisticsRankItem',
  props: {
    /**
     * 下标
     */
    index: {
      type: Number,
      required: true
    }
  },
  setup(props, context) {
    return () => (
      <li class={style['rank-item']}>
        <span class={[style['rank-item__badge'], { [style['rank-item__badge--active']]: props.index < 3 }]}>
          {props.index + 1}
        </span>
        <div class={style['rank-item__content']}>
          <span class={style['rank-item__label']}>{context.slots.label!()}</span>
          <span class={style['rank-item__value']}>{context.slots.value!()}</span>
        </div>
      </li>
    )
  }
})

export const StatisticsRankList = defineComponent({
  name: 'statisticsRankList',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  setup(props, context) {
    return () => (
      <div class={style['rank-container']}>
        <h2 class={style['rank-title']}>{props.title}</h2>
        <ul class={style['rank-list']}>{context.slots.default!()}</ul>
      </div>
    )
  }
})
